<template>
    <div id="root">
        <mu-flex justify-content="center" align-items="center">
            <mu-container class="container">
                <mu-row>
                    <mu-col>
                        <h1 class="title">PHR个人健康服务管理</h1>
                    </mu-col>
                </mu-row>
                <mu-row>
                    <mu-col>
                        <mu-text-field
                                v-model="phoneNumber"
                                label="手机号"
                                prefix="+86"
                                label-float
                                full-width
                                max-length="11"
                                @change="onPhoneNumberChange"
                                :error-text="phoneErrorText"/>
                    </mu-col>
                </mu-row>
                <mu-row>
                    <mu-col>
                        <mu-text-field
                                v-model="password"
                                label="密码"
                                label-float
                                full-width
                                :error-text="passwordErrorText"
                                :action-icon="visibility ? 'visibility_off' : 'visibility'"
                                :action-click="function() { visibility = !visibility }"
                                :type="visibility ? 'text' : 'password'"
                                @change="onPasswordChange"/>
                    </mu-col>
                </mu-row>
                <mu-row>
                    <mu-col>
                        <mu-button
                                round
                                full-width
                                color="primary"
                                @click="onLoginClick">登录
                        </mu-button>
                    </mu-col>
                </mu-row>
            </mu-container>
        </mu-flex>
    </div>
</template>

<script lang="ts">
    export default {
        data() {
            return {
                phoneNumber: "",
                phoneErrorText: "",
                password: "",
                passwordErrorText: "",
                visibility: false
            }
        },
        methods: {
            onPhoneNumberChange: function (newValue) {
                if (newValue.length < 11) {
                    this.phoneErrorText = "请输入11位的手机号码";
                }
                else {
                    this.phoneErrorText = "";
                }
            },
            onPasswordChange: function (newValue) {
                if (newValue.length < 6) {
                    this.passwordErrorText = "密码至少6位";
                }
                else if (!/[a-zA-Z0-9]{6,}/.test(newValue)) {
                    this.passwordErrorText = "密码只支持大小写字母和数字";
                }
                else {
                    this.passwordErrorText = "";
                }
            },
            onLoginClick: function () {
                console.log(this.phoneNumber + "-" + this.password)
            }
        }
    }
</script>
<style scoped>
    .title {
        font-size: 20px;
        font-weight: 500;
    }

    .container {
        padding-right: 16px;
        padding-left: 16px;
    }

    #root {
        position: absolute;
        top: 40%;
        width: 100%;
        transform: translate(0, -50%);
        text-align: center;
    }
</style>